<!--订单管理-考试订单-课程订单详情-->
<template>
  <div class="caregiver-container">
    <!-- 主体卡片 -->
    <div class="caregiver-card">
      <!-- 卡片内容 -->
      <div class="card-content">
        <!-- 基本信息 -->
        <div class="benefits-section">
          <h4 style="font-weight: bold">订单信息</h4>
          <div class="info-item">
            <span class="info-label">订单号：</span>
            <span class="info-value">{{detailsList}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">下单时间：</span>
            <span class="info-value">{{ detailsList }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">下单企业：</span>
            <span class="info-value">{{ detailsList }}</span>
          </div>
<!--          <div class="info-item">-->
<!--            <span class="info-label">联系人手机：</span>-->
<!--            <span class="info-value">{{ detailsList }}</span>-->
<!--          </div>-->
        </div>

        <!-- 员工福利 -->
        <div class="benefits-section">
          <h4 style="font-weight: bold">付款信息</h4>
          <div class="info-item">
            <span class="info-label">实付金额：</span>
            <span class="info-value">{{detailsList}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">付款方式：</span>
            <span class="info-value">微信支付</span>
            <!--            <span class="info-value">其它方式转账</span>-->
          </div>
          <div class="info-item">
            <span class="info-label">付款时间：</span>
            <span class="info-value">{{ detailsList }}</span>
          </div>

        </div>

        <!-- 审核状态 -->
        <div class="review-section">
          <div class="status-display">
            <span class="status-label">订单状态：</span>
            <span class="status-value" :class="statusClass">{{ resultTitle }}</span>
          </div>

          <!-- 操作按钮 -->
<!--          <div class="action-buttons" v-if="showActions">-->
<!--              <el-button type="danger" size="medium" @click="handleReview(false)" :loading="loading">-->
<!--              <i class="el-icon-close"></i> 退款-->
<!--            </el-button>-->
<!--          </div>-->

          <!-- 审核结果 -->
          <div class="review-result" v-if="!showActions">
            <el-alert :title="resultTitle" :type="resultType" show-icon :closable="false">
              <span v-if="reviewTime">审核时间：{{ reviewTime }}</span>
            </el-alert>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!--列表-->
      <el-table size="small" @selection-change="selectChange" :data="itemList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <!-- <el-table-column align="center" type="selection" width="50">
        </el-table-column> -->
        <el-table-column align="center" sortable prop="item_name" label="套餐内容" width="300">
        </el-table-column>
        <el-table-column align="center" sortable prop="item_unitname" label="价格(元)" width="300">
        </el-table-column>
        <el-table-column align="center" sortable prop="item_source_price" label="限时优惠" width="300">
        </el-table-column>
<!--        <el-table-column label="操作" min-width="150">-->
<!--          <template v-slot="scope">          -->
<!--            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>-->
<!--            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">取消订单</el-button>-->
<!--            <el-button size="mini" @click="courserTable(scope.$index, scope.row)">退款</el-button>        -->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import { updategwshstate } from '../../api/InstitutionApi'
export default {
  data() {
    return {
      // "gwi_publishstate": 1待审核，2审核通过；  "gwi_curstate": 0 草稿  1正式发布
      status: 'pending', // pending / approved / rejected
      gwi_status: 0,
      loading: false,
      reviewTime: '',
      detailsList: {},
    }
  },
  // 通过计算属性转换状态
  computed: {
    statusText() {
      const statusMap = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return statusMap[this.status]
    },
    statusClass() {
      return {
        'status-pending': this.status === 'pending',
        'status-approved': this.status === 'approved',
        'status-rejected': this.status === 'rejected'
      }
    },
    showActions() {
      return this.status === 'pending'
    },
    resultTitle() {
      // return this.status === 'approved' ? '审核已通过' : '审核未通过'
      return this.gwi_status === 1 ? "待支付" : "已购买"
    },
    resultType() {
      return this.status === 'approved' ? 'success' : 'error'
    }
  },
  created() {
    // 获取从前一个页面传回来的值
    this.detailsList = this.$route.query.joblist;
    this.gwi_status = this.detailsList.gwi_shenhestate;
    console.log('joblist:',this.detailsList,this.gwi_status);

  },
  methods: {
    handleReview(isApproved) {
      this.loading = true
      // 模拟API请求
      setTimeout(() => {
        this.status = isApproved ? '2' : '1'
        updategwshstate({
          gwiflowid : this.detailsList.gwi_flowid,
          shenhestate : this.status
        }).then( res => {
          console.log('审核完成',res)
          this.loading = false
          // 提示浙江省上
          this.$message({
            message: isApproved ? '审核已通过' : '审核已拒绝',
            type: isApproved ? 'success' : 'warning',
            duration: 2000
          })
        })
      }, 800)
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style scoped>
.caregiver-container {
  /**max-width: 80%;
  //margin: 0 auto;*/
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h2 {
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.caregiver-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-bottom: 1px solid #ebeef5;
}

.job-title h3 {
  margin: 0 0 5px 0;
  font-size: 20px;
  color: #303133;
}

.job-category {
  display: inline-block;
  padding: 3px 8px;
  background: #409EFF;
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.company-logo {
  text-align: center;
}

.company-logo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-name {
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #409EFF;
}

.card-content {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.info-section {
  margin-bottom: 25px;
  margin-right: 30px;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 15px;
}

.info-label {
  color: #909399;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #606266;
  font-weight: 500;
}

.benefits-section {
  /* margin: 25px 0;
  padding: 15px 0;
  border-top: 1px dashed #dcdfe6; */
  border-bottom: 1px dashed #dcdfe6;
}



.benefits-section h4 {
  margin: 0 0 15px 0;
  color: #909399;
  font-size: 16px;
  font-weight: normal;
}

.benefits-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.benefit-tag {
  display: inline-block;
  padding: 4px 10px;
  background: #f0f9eb;
  color: #67C23A;
  border-radius: 4px;
  font-size: 13px;
}

.review-section {
  margin-top: 20px;
}

.status-display {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.status-label {
  color: #909399;
}

.status-value {
  font-weight: bold;
  margin-left: 10px;
}

.status-pending {
  color: #E6A23C;
}

.status-approved {
  color: #67C23A;
}

.status-rejected {
  color: #F56C6C;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.review-result {
  margin-top: 20px;
}

.order-shouming {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  align-items: center;
}

.el-alert {
  border-radius: 4px;
}
</style>

